
<template>
  <div class="container mx-auto px-4 py-6">
    <div class="flex flex-col lg:flex-row gap-6">
      <div class="w-full lg:w-1/4">
        <div class="finance-card h-full">
          <div class="finance-card-header">
            <h2 class="text-lg font-medium text-white">地域分类</h2>
            <button @click="refreshData" class="text-slate-400 hover:text-white">
              <i class="fas fa-sync-alt"></i>
            </button>
          </div>
          
          <div class="p-4">
            <a-spin :spinning="loading" tip="加载中...">
              <div v-for="(regions, letter) in categorizedRegions" :key="letter" class="mb-4">
                <div class="flex items-center justify-between mb-2">
                  <h3 class="text-sm font-semibold text-slate-300 bg-slate-800 px-2 py-1 rounded">{{ letter }}</h3>
                  <div class="h-px flex-grow bg-slate-700 ml-2"></div>
                </div>
                
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                  <a 
                    v-for="region in regions" 
                    :key="region.code"
                    href="javascript:void(0)" 
                    class="category-link text-slate-300 hover:text-finance-blue-400"
                    @click="onSelectRegion(region)"
                  >
                    {{ region.name }}
                  </a>
                </div>
              </div>
            </a-spin>
          </div>
        </div>
      </div>
      
      <div class="w-full lg:w-3/4">
        <div class="finance-card">
          <div class="finance-card-header">
            <h2 class="text-lg font-medium text-white">地域板块行情</h2>
            <div class="flex items-center">
              <span class="text-xs text-slate-400 mr-4">
                <i class="far fa-clock mr-1"></i> {{ formattedUpdateTime }}
              </span>
              <button @click="refreshData" class="btn-primary">
                <i class="fas fa-sync-alt mr-1"></i> 刷新
              </button>
            </div>
          </div>
          
          <div class="overflow-x-auto">
            <table class="finance-table">
              <thead>
                <tr>
                  <th class="w-12">#</th>
                  <th class="w-24">板块</th>
                  <th class="w-24">涨跌幅(%)</th>
                  <th class="w-36">总成交量(万手)</th>
                  <th class="w-36">总成交额(亿元)</th>
                  <th class="w-32">净流入(亿元)</th>
                  <th class="w-24">上涨家数</th>
                  <th class="w-24">下跌家数</th>
                  <th class="w-24">领涨股</th>
                  <th class="w-20">最新价</th>
                  <th class="w-24">涨跌幅(%)</th>
                </tr>
              </thead>
              <tbody>
                <tr v-if="loading" class="animate-pulse">
                  <td colspan="11" class="text-center py-8">
                    <i class="fas fa-spinner fa-spin mr-2"></i> 加载数据中...
                  </td>
                </tr>
                <tr v-else-if="regionData.length === 0" class="animate-pulse">
                  <td colspan="11" class="text-center py-8 text-slate-500">
                    <i class="fas fa-exclamation-circle mr-2"></i> 暂无数据
                  </td>
                </tr>
                <tr v-for="item in regionData" :key="item.rank" class="hover:bg-slate-800">
                  <td>{{ item.rank }}</td>
                  <td>
                    <a 
                      :href="item.region.url" 
                      target="_blank"
                      class="text-finance-blue-400 hover:text-finance-blue-300"
                    >
                      {{ item.region.name }}
                    </a>
                  </td>
                  <td :class="item.change.isNegative ? 'text-fall' : 'text-rise'">
                    {{ item.change.value }}
                  </td>
                  <td>{{ item.volume }}</td>
                  <td>{{ item.amount }}</td>
                  <td :class="parseFloat(item.netflow) >= 0 ? 'text-rise' : 'text-fall'">
                    {{ item.netflow }}
                  </td>
                  <td class="text-rise">{{ item.upCount }}</td>
                  <td class="text-fall">{{ item.downCount }}</td>
                  <td>
                    <a 
                      :href="item.leadingStock.url" 
                      target="_blank"
                      class="text-finance-blue-400 hover:text-finance-blue-300"
                    >
                      {{ item.leadingStock.name }}
                    </a>
                  </td>
                  <td class="text-rise">{{ item.leadingStock.latestPrice }}</td>
                  <td class="text-rise">{{ item.leadingStock.change }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="px-4 py-3 flex items-center justify-between border-t border-slate-700">
            <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
              <div>
                <p class="text-sm text-slate-400">
                  显示 <span class="font-medium">1</span> 至 <span class="font-medium">{{ regionData.length }}</span> 条，共 <span class="font-medium">{{ regionData.length }}</span> 条
                </p>
              </div>
              <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                  <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-slate-700 bg-slate-800 text-sm font-medium text-slate-400 hover:bg-slate-700">
                    <span class="sr-only">上一页</span>
                    <i class="fas fa-chevron-left text-xs"></i>
                  </a>
                  <a href="#" class="relative inline-flex items-center px-4 py-2 border border-slate-700 bg-finance-blue-700 text-sm font-medium text-white hover:bg-finance-blue-600">
                    1
                  </a>
                  <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-slate-700 bg-slate-800 text-sm font-medium text-slate-400 hover:bg-slate-700">
                    <span class="sr-only">下一页</span>
                    <i class="fas fa-chevron-right text-xs"></i>
                  </a>
                </nav>
              </div>
            </div>
          </div>
        </div>
        

      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed, onMounted, ref } from 'vue';
import { useMarketDataStore } from '@/stores/marketData';
import { storeToRefs } from 'pinia';

export default defineComponent({
  name: 'RegionView',
  setup() {
    const marketStore = useMarketDataStore();
    const { regionCategories, regionData, loading, error } = storeToRefs(marketStore);
    const lastUpdateTime = ref(new Date());
    const formattedUpdateTime = computed(() => {
      return lastUpdateTime.value.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit', 
        hour: '2-digit', 
        minute: '2-digit',
        second: '2-digit'
      });
    });
    const categorizedRegions = computed(() => marketStore.categorizedRegions);
    onMounted(() => {
      refreshData();
    });
    const onSelectRegion = (region) => {
      window.open(region.url, '_blank');
    };
    const refreshData = async () => {
      await marketStore.loadAllRegionData();
      lastUpdateTime.value = new Date();
    };
    
    return {
      categorizedRegions,
      regionData,
      loading,
      error,
      formattedUpdateTime,
      onSelectRegion,
      refreshData
    };
  }
});
</script>